<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        账单详情
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../../css/main.css" media="all">
    <script type="text/javascript" src="../../../../lib/loading/okLoading.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../../lib/layui/css/layui_2.5.7.css">

</head>
<style>
    .adt {
        background: #f1f1f1;
        width: 15%;
    }

    table {
        margin-top: 8px;
    }

    .tatype {
        margin-top: -25px;
    }
</style>

<body>
<div class="x-nav">
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon"
                                                                        style="line-height:30px">ဂ</i></a>
</div>
<div>
    <div id="app">
        <div class="layui-card-body">
            <div class="table-responsive">
                <h5><b>出库信息</b></h5>
                <table class="table table-bordered">
                    <tr>
                        <td class="adt">购买单位名称</td>
                        <td>{{billData.clientName}}</td>
                        <td class="adt">账单负责人名称</td>
                        <td>{{billData.principalName}}</td>
                    </tr>
                    <tr>
                        <td class="adt">关联申请类型</td>
                        <td>{{billData.applyType == '0' ? "报价单" : billData.applyType == '1' ? "申请单": "无"}}</td>
                        <td class="adt">单据号</td>
                        <td>{{billData.formCode}}</td>
                    </tr>
                    <tr>
                </table>

                <h5><b>物料信息</b></h5><br>
                <div class="layui-card-body tatype">
                    <div class="table-responsive">
                        <table style="text-align: center" class="table table-bordered">
                            <thead>
                            <tr class="active">
                                <td>配件名称</td>
                                <td>出库数量</td>
                                <td>成本总价</td>
                                <td>配件总报价</td>
                                <td>安装总报价</td>
                                <td>有无偿</td>
                            </tr>
                            </thead>

                            <tbody>
                            <tr v-for="(item,index) in partsData">
                                <td>{{item.partsName}}</td>
                                <td>{{item.outNum}}</td>
                                <td>{{item.partsPrice}}</td>
                                <td>{{item.allGsuideprice}}</td>
                                <td>{{item.installAllprice}}</td>
                                <td>{{item.repayType == '0' ? "有偿" : "无偿" }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <h5><b>收款记录</b></h5><br>
                <div class="layui-card-body tatype">
                    <div class="table-responsive">
                        <table style="text-align: center" class="table table-bordered">
                            <thead>
                            <tr class="active">
                                <td style="width: 30%">收款日期</td>
                                <td style="width: 17.5%">收款金额</td>
                                <td style="width: 17.5%">操作人</td>
                                <td style="width: 17.5%">收款途径</td>
                                <td style="width: 17.5%">备注</td>
                            </tr>
                            </thead>

                            <tbody>
                            <tr>
                                <td>{{billData.acceptTime}}</td>
                                <td>{{billData.acceptPrice}}</td>
                                <td>{{billData.operationName}}</td>
                                <td>{{billData.acceptWay}}</td>
                                <td>{{billData.acceptRemark}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <h5><b>票据信息</b></h5><br>
                <div class="layui-card-body tatype">
                    <div class="table-responsive">
                        <table style="text-align: center" class="table table-bordered">
                            <thead>
                            <tr class="active">
                                <td style="width: 30%">开票日期</td>
                                <td style="width: 17.5%">开票金额</td>
                                <td style="width: 17.5%">经手人员</td>
                                <td style="width: 17.5%">签收人员</td>
                                <td style="width: 17.5%">备注说明</td>
                            </tr>
                            </thead>

                            <tbody>
                            <tr>
                                <td>{{billData.invoiceTime}}</td>
                                <td>{{billData.invoicePrice}}</td>
                                <td>{{billData.fistName}}</td>
                                <td>{{billData.invoiceName}}</td>
                                <td>{{billData.invoiceRemark}}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>
        </div>
        <br><br><br><br><br><br>
    </div>

</div>
<script type="text/javascript" src="../../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../../js/pub.js"></script>
<script src="../../../../lib/layui/layui2.5.7.js" charset="utf-8"></script>
<script src="../../../../js/x-layui.js" charset="utf-8"></script>
<script src="../../../../js/vue.min.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script>
    layui.use(['element', 'layer', 'form', 'laydate'], function () {
        $ = layui.jquery;//jquery
        lement = layui.element();//面包导航
        layer = layui.layer;//弹出层
        laydate = layui.laydate;//日期插件
        form = layui.form;
        okLoading.close($);
    })
</script>
<script>
    let recordId = getQueryVariable("id");
    var vm = new Vue({
        el: "#app",
        data: {
            recordId,
            billData: null,
            partsData: null
        },
        mounted() {
            let request = {
                url: 'kf/bill/getBillById',
                data: {
                    userId: $userId,
                    id: recordId
                },
                method: "GET",
            };
            sendRequest(request, (res) => {
                this.billData = res.data.billData
                this.partsData = res.data.partsData
                console.log(res.data.billData);
            });
        },
        methods: {}

    });


</script>

</body>

</html>
